<div class="alertContainer">
  <div class="filterArea">
    <div class="filter">
      <div class="filtertext capital-letters">
        {{'Data_Visualization.Overall.Group_by' | translate}}:
      </div>
      
      <div class="lang-box" style="margin-right:0.3rem;">
        <nz-dropdown [nzPlacement]="'bottomLeft'"  style="background-color: #2a2c52;">
          <!-- <button nz-button nz-dropdown class="groupByBtn">{{groupBy}}</button> -->
          <div nz-dropdown class="groupByBtn "  *ngIf="selectLanguage=='en'" >{{searchData.alertType && searchData.alertType.name}}
            <i class="iconfont icon-right1"></i>
          </div>

          <div nz-dropdown class="groupByBtn " *ngIf="selectLanguage=='yuenan'"  >{{searchData.alertType && searchData.alertType.vietName}}
            <i class="iconfont icon-right1"></i>
          </div>
          <ul nz-menu>
            <li style="text-align: center" class=" capital-letters" nz-menu-item *ngFor="let lang of allGroupBy" (click)="changeGroupBy(lang)">
              {{'Data_Visualization.Overall.'+lang.name|translate}}</li>
          </ul>
        </nz-dropdown>
      </div>
    </div>

    <div class="timeRange">
      <div class="filtertext capital-letters"  style="margin-right: 12px;">
        {{'Data_Visualization.Overall.TimeRange' | translate}}:
      </div>
      <div class="switch">
        <!-- <nz-date-picker [(ngModel)]="searchData[item.value]" (ngModelChange)="onSearch(item.value)"></nz-date-picker> -->
        <nz-range-picker nzFormat="yyyy-MM-dd" [nzPlaceHolder]="['Start Time', 'End Time']" [(ngModel)]="updatedDate"
          (ngModelChange)="onDateOk($event)" [nzDisabledDate]="disabledDate" ></nz-range-picker>
      </div>
    </div>
  </div>
  <div class="IncidentsEcharts" echarts [options]="options"></div>
</div>